<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'BarChart',
})
export default class BarChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);

        const initOption = {
            grid: {
                top: '20%', // 上边距
                right: '5', // 右边距
                left: '5', // 左边距
                bottom: '13%', // 下边距
                containLabel: true,
            },
            legend: {
                bottom: -5,
                icon: 'circle',
                selectedMode: false,
                itemHeight: 10, // 修改icon图形大小
                itemWidth: 10,
            },
            tooltip: {
                trigger: 'axis',
                confine: true,
                backgroundColor: 'rgba(255,255,255,1)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0,0,0,.65)',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
                formatter: function (param) {
                    var text = '';
                    text += `<div style="padding:5px">
                        <span style="font-size: 13px; font-weight: bold; color: #333">${param[0].name}</span>
                        <br >
                        <div>
                            <span style="font-size: 12px; color: #333;display: inline-block; width: 100px; margin: 0 20px;">
                                <b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[0].color}"></b>
                                ${param[0].seriesName}:<br >
                                支持: ${param[0].data.supportedNum}条 (${param[0].data.supportedRatio}) <br >不支持: ${param[0].data.unsupportedNum}条 (${param[0].data.unsupportedRatio})
                            </span>
                            <span style="font-size: 12px; color: #333;display: inline-block; width: 100px; margin: 0 20px;">
                                <b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[2].color}"></b>
                                ${param[2].seriesName}:<br >
                                支持: ${param[2].data.supportedNum}条 (${param[2].data.supportedRatio}) <br >不支持: ${param[2].data.unsupportedNum}条 (${param[2].data.unsupportedRatio})
                            </span>
                        </div>
                        <br >
                        <div>
                            <span style="font-size: 12px; color: #333;display: inline-block; width: 100px; margin: 0 20px;">
                                <b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[1].color}"></b>
                                ${param[1].seriesName}:<br >
                                支持: ${param[1].data.supportedNum}条 (${param[1].data.supportedRatio}) <br >不支持: ${param[1].data.unsupportedNum}条 (${param[1].data.unsupportedRatio})
                            </span>
                            <span style="font-size: 12px; color: #333;display: inline-block;width: 100px;margin: 0 20px;">
                                <b style="display:inline-block;width:8px;height:8px;border-radius:6px;background-color:${param[3].color}"></b>
                                ${param[3].seriesName}:<br >
                                支持: ${param[3].data.supportedNum}条 (${param[3].data.supportedRatio}) <br >不支持: ${param[3].data.unsupportedNum}条 (${param[3].data.unsupportedRatio})
                            </span>
                        </div>
                    </div>`;
                    return text;
                },
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: false, // 隐藏X轴刻度
                },
                axisLine: {
                    lineStyle: {
                        color: '#CCCCCC',
                    },
                },
                // data: x,
                axisLabel: {
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)',
                        // fontSize: 14,
                        // fontFamily: 'Source Han Sans CN-Regular',
                    },
                    // formatter(val) {
                    //     if (val.indexOf('2月1日') > -1) {
                    //         return '一季度';
                    //     } else if (val.indexOf('5月1日') > -1) {
                    //         return '二季度';
                    //     } else if (val.indexOf('8月1日') > -1) {
                    //         return '三季度';
                    //     } else if (val.indexOf('11月1日') > -1) {
                    //         return '四季度';
                    //     }
                    //     return '';
                    // },
                },
            },
            yAxis: {
                type: 'value',
                // name: '剩余期限(天数)',
                nameTextStyle: {
                    color: 'rgba(0,0,0,0.65)',
                    // fontSize: 14,
                    // fontFamily: 'Source Han Sans CN-Regular',
                    align: 'left',
                    padding: [10, 5, 20, -32],
                    verticalAlign: 'center',
                },
                splitNumber: 5,
                nameGap: 20,
                axisLabel: {
                    color: 'rgba(0,0,0,0.65)',
                    // textStyle: {
                    //     fontSize: 14,
                    // },
                    formatter: '{value}%',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(223, 223, 223, 1)',
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    // lineStyle: {
                    //     // color: 'rgba(223, 223, 223, 1)',
                    //     // type: 'dashed',
                    // },
                    lineStyle: {
                        color: ['#eee'],
                        // color: ['#eee', '#eee', '#eee', '#eee', '#facc9f', '#f3bebd'],
                        width: 1,
                        type: 'solid',
                    },
                },
            },

            series: [
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#3c7786',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#3c7786',
                        borderColor: '#3c7786',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#99c39c',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#99c39c',
                        borderColor: '#99c39c',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#db5476',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#db5476',
                        borderColor: '#db5476',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#feb580',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#feb580',
                        borderColor: '#feb580',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#db5476',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#db5476',
                        borderColor: '#db5476',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
                {
                    type: 'line',
                    symbolSize: 0, // 标记的大小
                    lineStyle: {
                        color: '#9d7f62',
                        width: 2,
                    },
                    itemStyle: {
                        // 折线拐点标志的样式
                        color: '#9d7f62',
                        borderColor: '#9d7f62',
                        borderWidth: 5,
                    },
                    smooth: 0.4,
                    emphasis: {
                        scale: 1.5,
                    },
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            xAxis: { data: e.xAxisData },
            yAxis: { name: e.unit },
            series: e.data,
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
